<template>
  <el-dialog
    :model-value="KpiDialogVisible"
    :title="title"
    align-center
    draggable
    width="49%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <el-form :model="form" label-width="120px" :rules="rules">
      <el-form-item label="员工">
        <el-select
          filterable
          remote
          style="width: 200px"
          v-model="form.empId"
          placeholder="请选择员工"
          @change="matchPosition($event, index)"
        >
          <el-option
            v-for="(item, index) in EmpList"
            :label="item.name"
            :key="index"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="岗位">
        <el-select
          v-model="form.positionId"
          style="width: 200px"
          placeholder="请选择员工岗位"
          @change="matchKpi($event, index)"
        >
          <el-option
            v-for="(item, index) in PositionList"
            :label="item.position"
            :key="index"
            :value="item.positionId"
          >
            {{ item.position }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="提成条目">
        <el-select
          v-model="form.kpiId"
          style="width: 200px"
          placeholder="请选择提成条目"
          @change="match($event, index)"
        >
          <el-option
            v-for="(item, index) in KpiRuleList"
            :label="item.name"
            :key="index"
            :value="item.kpiId"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-for="(item, index) in empKpiList"
        :key="index"
        :label="'提成条目' + (index + 1)"
        :prop="'percentList.' + index + '.value'"
      >
        <div>
          <el-input
            v-model="item.inTarget1"
            style="width: 200px"
            placeholder="请填写条目一"
          />
          <el-input
            v-model="item.inTarget2"
            style="width: 200px; margin-left: 20px"
            placeholder="请填写条目二"
          />
        </div>
        <div>
          <el-button
            v-if="props.type == 'add'"
            @click.prevent="removeDomain(item)"
            type="primary"
            icon="Minus"
            circle
            style="margin-left: 20px; margin-left: 20px"
            size="large"
          />
        </div>
        <div>
          <el-button
            v-if="props.type == 'add' && index === empKpiList.length - 1"
            @click="addDomain(index)"
            type="primary"
            icon="Plus"
            size="large"
            circle
          />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 200px" @click="onClose">取消</el-button>
        <el-button style="width: 200px" type="primary" @click="submitForm"
          >提交</el-button
        >
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {
  ref,
  onMounted,
  onBeforeMount,
  reactive,
  defineProps,
  defineEmits,
  watch,
} from "vue";
import { addRule, updatetRule, getKpiPercent, getOneRuleList } from "@/api/kpi";
import { addEmpKpi, updateOneEmpKpi } from "@/api/empKpi";
import { getEmpList } from "@/api/employee";
import { getEmpPositionList } from "@/api/position";
import { ElMessage } from "element-plus";

const form = reactive({
  id: "",
  empId: "",
  positionId: "",
  kpiId: "",
});

const KpiDialogVisible = ref(true);
const props = defineProps({
  KpiDialogVisible: {
    type: Boolean,
    required: true,
  },
  close: {
    type: Function,
    default: () => {},
  },
  update: {
    type: Function,
    default: () => {},
  },
  selectContent: {
    type: Object,
    required: true,
  },
  type: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
});
watch(props, (newValue, oldValue) => {
  if (newValue.selectContent != undefined) {
    form.empId = newValue.selectContent.empId;
    form.positionId = newValue.selectContent.positionId;
    form.kpiId = newValue.selectContent.kpiId;
    if (newValue.type == "add") {
      empKpiList.splice(0, empKpiList.length);
      empKpiList[0] = {
        empId: form.empId,
        kpiId: form.kpiId,
        inTarget1: "",
        inTarget2: "",
      };
    }
    if (newValue.type == "edit") {
      form.id = newValue.selectContent.empKpiId;

      EmpList.value = [];
      getEmpList().then((data) => {
        for (let i of data.data) {
          i.id = String(i.id);
          EmpList.value.push(i);
        }
      });

      PositionList.value = [];
      let positionId = newValue.selectContent.positionId;
      getOneRuleList({ positionId }).then((data) => {
        KpiRuleList.value = data.data;
        for (let i of data.data) {
          i.id = String(i.id);
          PositionList.value.push(i);
        }
      });
      empKpiList.splice(0, empKpiList.length);
      empKpiList[0] = {
        id: newValue.selectContent.empKpiId,
        empId: form.empId,
        kpiId: form.kpiId,
        inTarget1: newValue.selectContent.inTarget1,
        inTarget2: newValue.selectContent.inTarget2,
      };
    }
  }
});

const EmpList = ref([]);
onBeforeMount(() => {
  getEmpList().then((data) => {
    EmpList.value = data.data;
  });
});

const PositionList = ref([]);
const matchPosition = (empId, index) => {
  form.positionId = "";
  form.pieceId = "";
  getEmpPositionList({ empId }).then((data) => {
    PositionList.value = data.data;
  });
};

const KpiRuleList = ref([]);
const matchKpi = (positionId, index) => {
  form.pieceId = "";
  getOneRuleList({ positionId }).then((data) => {
    KpiRuleList.value = data.data;
  });
};

const empKpiList = reactive([]);
const match = () => {
  empKpiList[0] = {
    kpiKey: 1,
    empId: form.empId,
    kpiId: form.kpiId,
    inTarget1: "",
    inTarget2: "",
  };
};

const onClose = () => {
  props.close();
};

const removeDomain = (item) => {
  const index = percentList.indexOf(item);
  if (index !== -1) {
    form.percentList.splice(index, 1);
  }
};

const addDomain = (index) => {
  empKpiList[index + 1] = {
    kpiKey: index,
    empId: form.empId,
    kpiId: form.kpiId,
    inTarget1: "",
    inTarget2: "",
  };
};

const submitForm = () => {
  if (props.type == "add") {
    addEmpKpi(empKpiList).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "新增成功",
          type: "success",
        });
        props.close();
        props.update();
      } else {
        ElMessage.error("新增失败");
      }
    });
  } else if (props.type == "edit") {
    updateOneEmpKpi(empKpiList[0]).then((data) => {
      if (data.code == 200) {
        ElMessage({
          message: "编辑成功",
          type: "success",
        });
        props.close();
        props.update();
      } else {
        ElMessage.error("编辑失败");
      }
    });
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>
